import { MenuProps } from 'antd';

import { Button, Dropdown, Tooltip, Checkbox } from '@/components/eai-design';
import GradientBox from '@/components/GradientBox';
import { SvgIcon } from '@/components/icon';
import AvatarDisplay from '@/components/work-modal/components/AvatarDisplay';
import { ExternalSite } from '@/types/nav/api';

interface SiteItemProps {
  site: ExternalSite;
  isEditMode: boolean;
  selected: boolean;
  onCheck: (id: string, isChecked: boolean) => void;
  onEdit: () => void;
  onDelete: () => void;
}

const SiteItem = ({ site, selected, onCheck, isEditMode, onEdit, onDelete }: SiteItemProps) => {
  const items: MenuProps['items'] = [
    {
      key: '1',
      icon: <SvgIcon icon="edit" size={16} color="var(--text-5)" />,
      label: <span className="pr-7 text-[13px] text-text-5">编辑</span>,
      onClick: (e) => {
        e.domEvent.stopPropagation();
        e.domEvent.preventDefault();
        onEdit();
      },
    },
    {
      key: '2',
      icon: <SvgIcon icon="delete-icons" size={16} color="var(--text-5)" />,
      label: <span className="text-[13px] text-error">删除</span>,
      onClick: (e) => {
        e.domEvent.stopPropagation();
        e.domEvent.preventDefault();
        onDelete();
      },
    },
  ];

  return (
    <GradientBox showCheck={false} key={site?.id} active={selected}>
      <div
        className="group cursor-pointer transition-shadow hover:shadow-sm"
        style={{
          height: '152px',
          position: 'relative',
        }}
        onClick={(e) => {
          e.stopPropagation();
          const url =
            site.url.startsWith('http://') || site.url.startsWith('https://')
              ? site.url
              : `https://${site.url}`;
          window.open(url, '_blank');
        }}
      >
        {isEditMode && (
          <Checkbox
            style={{ position: 'absolute', top: '6px', right: '8px' }}
            checked={selected}
            onClick={(e) => {
              e.stopPropagation();
            }}
            onChange={(e) => {
              onCheck(site?.id, e.target.checked);
            }}
          />
        )}
        <div className="flex h-full items-start p-[16px]">
          <div className="flex w-full flex-col">
            <div className="flex items-center">
              <AvatarDisplay src={site.image_url} size={32} className="h-[32px] w-[32px]" />
              <div className="ml-2 w-full truncate font-font-weight-600 text-text-5">
                {site.name}
              </div>
            </div>
            <div className="mt-2 w-full flex-1">
              <Tooltip title={site.description}>
                <p
                  className={`${isEditMode ? 'line-clamp-4' : 'line-clamp-5'} text-xs text-text-4`}
                >
                  {site.description}
                </p>
              </Tooltip>
            </div>
          </div>
        </div>
        {isEditMode && (
          <div className="absolute bottom-2 right-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
            <Dropdown menu={{ items }} trigger={['hover', 'click']}>
              <Button
                type="text"
                size="small"
                className="group"
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                }}
                icon={
                  <SvgIcon
                    className="group-hover:text-error"
                    icon="work-more"
                    size={20}
                    color="var(--text-3)"
                  />
                }
              />
            </Dropdown>
          </div>
        )}
      </div>
    </GradientBox>
  );
};
export default SiteItem;
